<template>
    <div>{{ props.title }}</div>
    <div>
        <a-form :model="formState">
            <a-form layout="inline">
                <a-form-item
                    style="margin-right: 2em; margin-bottom: 0.6em"
                    v-bind="validateInfos.title"
                >
                    <template #label
                        ><div style="width: 5.1em">
                            <span style="float: left">标</span><span>题</span>
                        </div></template
                    >
                    <a-input
                        v-model:value="formState.title"
                        style="width: 20em"
                    />
                </a-form-item>
                <a-form-item label="指标数" style="margin-right: 2em">
                    <a-select
                        v-model:value="formState.sqlConfig.length"
                        disabled
                        style="width: 6em"
                    >
                        <a-select-option value="1">1</a-select-option>
                        <a-select-option value="2">2</a-select-option>
                        <a-select-option value="3">3</a-select-option>
                        <a-select-option value="4">4</a-select-option>
                        <a-select-option value="5">5</a-select-option>
                        <a-select-option value="6">6</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="数据库" style="margin-right: 2em">
                    <a-select
                        v-model:value="formState.dbID"
                        :options="dbs"
                        style="width: 12em"
                    />
                </a-form-item>
                <a-form-item label="实时采集">
                    <a-checkbox
                        v-model:checked="formState.real"
                        style="transform: scale(1.5)"
                    />
                </a-form-item>
            </a-form>
            <template v-for="i in formState.sqlConfig.length">
                <a-form layout="inline">
                    <a-form-item
                        style="margin-right: 2em"
                        v-bind="validateInfos.name"
                    >
                        <template #label>指标 {{ i }} 名称</template>
                        <a-input
                            v-model:value="formState.sqlConfig[i - 1].name"
                            style="width: 20em"
                        />
                    </a-form-item>
                </a-form>
                <a-form-item>
                    <div>SQL:</div>
                    <a-textarea
                        v-model:value="formState.sqlConfig[i - 1].sql"
                        :rows="4"
                        style="width: 44em"
                        placeholder="指标值转换为 IND , 维度名称转换为 NAME&#10;实例：&#10;SELECT COUNT(1) AS IND, COUNT(1) AS NAME FROM DUAL"
                    />
                    <template v-if="i == formState.sqlConfig.length">
                        <a-button
                            type="primary"
                            style="margin-left: 1.2em"
                            @click="onSave"
                            >保存</a-button
                        >
                    </template>
                </a-form-item>
            </template>
        </a-form>
    </div>
</template>

<script setup>
import { reactive, computed, toRaw, onMounted } from "vue"
import { message, Form } from "ant-design-vue"
import { useDataBaseStore } from "@/stores/dataBase"
import { RePortApi } from "@/api/js/reportApi"

const props = defineProps({
    title: {
        type: String,
        default: "单数据配置",
    },
    reportCode: String,
    indKey: String,
})

onMounted(() => {
    RePortApi.getComplexInd(props.reportCode, props.indKey).then((res) => {
        if (res.status !== 200) {
            message.error(res.data)
            return
        }
        formState.title = res.data.title
        formState.dbID = res.data.dbID
        formState.real = res.data.real
        if (res.data.sqlConfig != undefined) {
            formState.sqlConfig = res.data.sqlConfig
        }
    })
})

const dbStore = useDataBaseStore()

const useForm = Form.useForm
const formState = reactive({
    title: "门急诊人次",
    dbID: "",
    sqlConfig: [],
    real: false,
})

const rules = reactive({
    title: [
        {
            required: true,
            message: "标题不能为空",
            trigger: "change",
        },
    ],
    name: [
        {
            required: true,
            message: "指标名称不能为空",
            trigger: "change",
        },
    ],
})

const dbs = computed(() => dbStore.getItems())

const { validate, validateInfos } = useForm(formState, rules)

const onSave = () => {
    validate().then(() => {
        validate().then(() => {
            let data = toRaw(formState)
            let key = { id: props.reportCode, indId: props.indKey }
            data.key = key
            RePortApi.saveComplexInd(data)
                .then((res) => {
                    if (res == "success") {
                        message.success("保存成功")
                    } else {
                        message.error(res)
                    }
                })
                .catch((err) => {
                    message.error(err)
                })
        })
    })
}
</script>

<style scoped></style>
